<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue的cdn链接 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app" style="text-align: center;">
        <!-- 标题 -->
        <h1>{{ title }}</h1>
        <!-- 账号和密码输入组件 -->
        <div v-if="noLogin">账号:<input v-model="userName" type="text" /></div>
        <div v-if="noLogin">密码:<input v-model="password" type="password" /></div>
        <!--登录按钮-->
        <div v-on:click="click" style="border-radius: 30px;width:100px;margin:20px auto;color:white;background-color: #64967E;">
            {{ buttonTitle }}
        </div>
    </div>

<script>
    const {createApp,ref} = Vue
    const config = {
        setup() {
            // 定义页面需要的数据
            const title = ref("欢迎您：未登录")
            const noLogin = ref(true)
            const userName = ref("")
            const password = ref("")
            const buttonTitle = ref("登录")
            // 定义登录按钮的方法
            const click = function() {
                if (noLogin.value){
                    login()
                } else {
                    logout()
                }
            }
            // 登录操作
            const login = () => {
                // 判断账号密码是否为空
                if (userName.value.length > 0 && password.value.length > 0) {
                    // 登录成功
                    alert(`userName:${userName.value} password:${password.value}`)
                    noLogin.value = false
                    title.value = `欢迎您：${userName.value}`
                    buttonTitle.value = '注销'
                    userName.value = ''
                    password.value = ''
                } else {
                    alert('请输入用户名密码')
                }
            }
            // 注销操作
            const logout = () => {
                // 清空登录数据
                noLogin.value = true
                title.value = '欢迎您：未登录'
                buttonTitle.value = '登录'
                userName.value = ''
                password.value = ''
            }
            return {title,noLogin,userName,password,buttonTitle,click}
        }
    }

    // 创建应用实例
    const app = createApp(config)
    // 挂载应用实例
    app.mount('#app')
</script>
</body>
</html>